<template>
	<view class="centent">
		<view class="user">
			<view class="user-title" >
				<view class="user-name">{{urlName}}</view>
			</view>
		</view>
		<view class="qrcode">
				<view>
					<view class="qrimg">
						<tki-qrcode 
						ref="qrcode" 
						:val="val" 
						:size="size" 
						:unit="unit" 
						:background="background" 
						:foreground="foreground"
						:pdground="pdground" 
						:iconSize="iconsize" 
						:lv="lv" 
						:onval="onval" 
						:loadMake="loadMake"
						:showLoading="showLoading" 
						:loadingText="loadingText" 
						@result="qrR" />
					</view>
				</view>
 
		</view>
		<view class="note">扫一扫上面的二维码图案，添加我好友</view>
	</view>
</template>
 
<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
	
		data() {
			return {
				urlName: "wz145785356824",
				token: "",
				uuid: "",
				guid: "",
				ImDeviceNumber:"",
				// 修改此链接，可以变换二维码
				qrCode:"https://www.baidu.com",
				val: '',
				size: 420,
				background: '#ffffff',
				foreground: '#000000',
				pdground: '#000000',
				iconsize: 30,
				lv: 3,
				onval: true,
				unit: 'upx',
				loadMake: true,
				src: '',
				showLoading: true,
				loadingText: '二维码生成中'
					
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'idInfo',
				success: res => {
					var data = res.data;
					this.uuid = data.uuid;
					this.guid = data.guid;
				}
			});
			uni.getStorage({
				key: 'user',
				success: res => {
					var data = res.data;
					this.token = data.token;
				}
			});
			this.code();

			this.val=this.qrCode;
				
		},
		methods: {
					
			code(){
				uni.request({
					url: 'https://www.baidu.com',
					method: 'POST',
					header: {
						'content-type' : "application/json",
						'Im-Token' : this.token,
						'Im-Client-Id':this.uuid,	
						'Im-Device-Number':this.uuid,	
										
				},				
				data:{
					id:this.guid,
					action: 'qrcodeContent',
					type : '2',	
					payload:{
						type:"1",
					}					
				},
				success: res =>{			
					if(res.data.code == 0 ){
						this.qrCode=res.data.payload.content;
							console.log("44this.qrCode",this.qrCode);
						}else{
							uni.showToast({title:res.data.message, icon:"none"});
						}				
					}
				})
			},
			qrR(){
				console.log("二维码")
			},
		}
	}
</script>
 
<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: #3E8BC7;
	}
	.centent {
		width: 86%;
		padding: 30upx 0;
		margin: 120upx auto;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 7px;
		.user {
			width: 100%;
			margin: 10upx auto;
			box-sizing: border-box;
			color: #000000;
			flex-direction: row;
			align-items: center;
			display: flex;
			.user-title {
				height: 150upx;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
				margin: 0 auto;
				.user-name {
					margin-top: 10upx;
					height: 100upx;
					line-height: 140upx;
					font-size: 32upx;
					color: #000000;
					display: block;
				}
			}
		}
	}
	
	.qrcode{
		display: flex;
		justify-content: center;
		.qrimg{
			
		}
	}
	uni-image{
		width: 100%;
		/* height: 100%; */
	}
	.note{
		width: 100%;
		margin: 0 auto;
		padding: 10px 0;
		font-size:14px;
		font-family:PingFang SC;
		font-weight:400;
		line-height:51px;
		color:rgba(144,144,144,1);
		letter-spacing:1px;
		opacity:1;
		text-align: center;
	}
	
	canvas{
	    height: 370px;
	    width: 370px;
	  }
</style>